<template>
   <div id="box">
    <Header></Header>
        <div id="content">
            <div class="head">
                <!-- v-model 绑定勾选状态  change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                <input v-model ="isAll" @change ="handleChangeAll()" type="checkbox"> 全选/全不选
            </div>
            <ul>
                <li v-for = "(items,index) in goods" :key = "items.id">
                    <div>
                        <!-- v-model 绑定勾选状态 change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                        <!-- :value="items" 拿到勾选了的内容，方便接下来用勾选了的内容里面包含的价格和数量算总金额。 -->
                        <input type="checkbox" v-model = "checklist" :value="items" @change = "handleChange()">
                    </div>
                    <img :src="items.pic" alt="">
                    <div>
                        <div>{{items.name}}</div>
                        <div style="color: red;">${{items.price}}</div>
                    </div>
                    <div>
                        <!-- 当 items.number === 1时，disabled 为真，禁用这个按钮 -->
                        <button @click = "items.number--" :disabled = "items.number === 1">-</button>
                        <span>{{items.number}}</span>
                        <button @click = "items.number++" :disabled = "items.number === items.limit">+</button>
                    </div>
                    <div>
                        <!-- 绑定一个事件，删除 goods列表 中的 第index 项 -->
                        <button @click = "handleDeleteClick(index,items.id)">删除</button>
                    </div>
                </li>
            </ul>
            <footer>
                <p>合计:{{sum()}}</p>
                {{checklist}}
                <div>去付款</div>
            </footer>
        </div>
    </div>
</template>

<script>
import Header from "../components/BBSHeader.vue"
export default{
  name:'ShopGo',
  data() {
    return {
      isAll:false,
                checklist:[], // 拿到勾选了的商品
                goods:[
                    {
                        name:'JMSHOP 清纯校花 白色针织开衫慵懒风秋装女宽松仿貂毛毛衣外套',
                        price:40,
                        number:1,
                        id:1,
                        limit:5,
                        pic:"../js/img/shop.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:30,
                        number:1,
                        id:2,
                        limit:3,
                        pic:"../js/img/shop2.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:20,
                        number:1,
                        id:3,
                        limit:4,
                        pic:"../js/img/shop3.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:10,
                        number:1,
                        id:4,
                        limit:5,
                        pic:"../js/img/shop4.jpg"
                    },
                ]


    }
  },
  components: {
            Header,
          },
  methods:{
                sum(){
                    var total = 0
                    this.checklist.forEach(items => {
                        total += items.price * items.number    
                    });
                    return total
                },
                handleDeleteClick(index,id){
                    // 删除 goods 列表中的 第 index 项
                    this.goods.splice(index,1)
                    // 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，
                    // 把checklist 这一项过滤掉，然后重新生成 checklist 
                    this.checklist = this.checklist.filter(items => items.id !==id)
                    // 每点击删除事件时，触发 handleChange() 事件
                    this.handleChange()
                },
                handleChangeAll(){
                    if(this.isAll){
                        this.checklist = this.goods
                    }else{
                        this.checklist = []
                    }
                },
                handleChange(){
                    if(this.checklist.length === this.goods.length){
                        this.isAll = true
                    }else{this.isAll = false}
                }
            }
}
</script>

<style scoped>
   *{margin: 0;padding: 0;}
        #content{
            width: 100%;height: 100%;
        }
        .head{
            height: 60px;
            margin: 30px 30px;
        }
        ul li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 30px;
        }
        li img{width: 80px;height: 120px;}
        footer >p{
            margin-left: 30px;
            float: left;
        }
        footer >div{
            margin-right: 30px;
            float:right;
        }

</style>